<template>
  <view>
    <swiper
      class="swiper"
      :vertical="true"
      circular
      :duration="500"
      @change="change"
      style="min-height: 100vh"
      :circular="false"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <video
          @click="handlePlay(index)"
          :id="'myVideo' + index"
          :autoplay="true"
          :muted="false"
          loop
          :show-fullscreen-btn="false"
          object-fit="contain"
          :src="item.videoAddress"
          :show-play-btn="false"
          :show-center-play-btn="true"
        >
          <view
            v-if="playShow"
            class="d-center t-c"
            style="position: absolute; width: 100%; height: 100%"
          >
            <view class="play-right">
              <u-icon name="play-right-fill" size="120" color="#fff"></u-icon>
            </view>
          </view>
        </video>
        <!--  -->
        <view class="video-right">
          <image @click="GoDetails(item)" :src="item.avatar" mode=""></image>
          <view class="mt" @click="heart(item)" v-if="!item.likeType">
            <u-icon name="heart" size="60" color="#fff"></u-icon>
            <view class="">{{ item.likeNum }}</view>
          </view>
          <view class="mt" v-else>
            <u-icon name="heart-fill" size="60" color="#ff0000"></u-icon>
            <view class="">{{ item.likeNum }}</view>
          </view>
          <view class="mt u-m-t-20" @click.stop="chat(item)">
            <u-icon name="chat" size="60" color="#fff"></u-icon>
            <view class="">{{ item.commentNum }}</view>
          </view>
        </view>
        <view class="video-bottom">
          <view class="name">@{{ item.userName }}</view>
          <view class="details">{{ item.title }}</view>
        </view>
        <view class="">222</view>
      </swiper-item>
    </swiper>
    <!-- 评论弹出层 -->
    <view v-if="show" class="ppppppppppppppp">
      <view class="d-between top-commit">
        <view class=""></view>
        <view class="">全部评论</view>
        <view class="">
          <u-icon name="close" size="40" @click="show = false"></u-icon>
        </view>
      </view>
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        @scrolltolower="scrolltolower"
      >
        <view class="char-list">
          <view class="" v-for="(itm, idx) in charts" :key="idx" class="chat">
            <view class="d-flex">
              <view class="">
                <image :src="itm.avatar" class="bigavatar" mode=""></image>
              </view>
              <view style="width: 100%">
                <view>
                  <view class="comment">{{ itm.userName }}</view>
                  <view class="recommit">{{ itm.content }}</view>
                  <view class="d-flex">
                    <view class="time">{{ itm.time }}</view>
                    <view class="reply" @click.stop="inputFocus(itm, idx)"
                      >回复</view
                    >
                  </view>
                </view>
                <view class="collapse" v-if="itm.replies.length !== 0">
                  <view
                    class="d-flex"
                    style="margin-top: 10px"
                    v-for="(im, ix) in itm.replies"
                    :key="ix"
                    v-show="bomContent"
                  >
                    <image class="replies-img" :src="im.avatar" mode=""></image>
                    <view class="" style="width: 250px; margin-left: 10px">
                      <view class="comment">{{ im.userName }}</view>
                      <view class="recommit" style="color: #000">{{
                        im.content
                      }}</view>
                      <view class="d-flex">
                        <view class="time">{{ im.time }}</view>
                      </view>
                    </view>
                  </view>
                  <view class="more-tit" @click="CommentShow()"
                    >一一 点击查看{{ itm.replies.length }}条评论
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="" style="height: 100rpx"></view>
          <u-loadmore :status="status" />
          <view class="a-center bom" v-if="goodKey">
            <u-input
              v-model="value"
              class="ipt"
              :clearable="false"
              cursorSpacing="30"
              :border="true"
              placeholder="请输入您的评论内容"
            >
            </u-input>
            <view v-if="value" @click="send()" class="weiBtn">发送</view>
            <view v-else class="zhiBtn">发送</view>
          </view>
          <view class="a-center bom" v-if="keyword">
            <u-input
              v-model="value"
              class="ipt"
              :clearable="false"
              :focus="keyword"
              cursorSpacing="30"
              :border="true"
              placeholder="请输入您的回复内容"
            >
            </u-input>
            <view v-if="value" @click="send()" class="weiBtn">发送</view>
            <view v-else class="zhiBtn">发送</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { videoData } from './static/data.js'
export default {
  data() {
    return {
      videoData,
      value: '',
      params: {
        pageNum: 1,
        pageSize: 20
      },
      chart: {
        dynamicId: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      charts: [],
      show: false,
      status: '正在加载',
      playShow: false,
      commentId: '',
      userId: '',
      keyword: false,
      goodKey: false,
      bomContent: false
    }
  },
  mounted() {
    // 循环视频
    this.list = JSON.parse(JSON.stringify(this.videoData))
    this.showVideo()
  },
  methods: {
    // 默认只有第一个视频进行播放
    showVideo() {
      // // mounted首次触发没有index
      let currentId = 'myVideo' + 0
      this.videoContext = uni.createVideoContext(currentId)
      console.log(this.videoContext)
      // html中video默认是全部不播放
      //然后在这里设置只播放第一个视频
      this.list = JSON.parse(JSON.stringify(this.videoData))
      this.list.forEach((item, idx) => {
        let temp = 'myVideo' + idx
        if (temp === currentId) {
          uni.createVideoContext(temp).play()
        }
      })
      console.log(this.list, 123)
    },
    // 暂停视频
    handlePlay(index) {
      // 获取当前视频id，以及他的对象方法
      let currentId = 'myVideo' + index
      this.videoContext = uni.createVideoContext(currentId)
      console.log(this.$refs.child)
      //暂停视频播放事件
      if (!this.playShow) {
        this.videoContext.pause()
        this.playShow = true
      } else {
        this.videoContext.play()
        this.playShow = false
      }
    },
    // 滑动视屏触发
    change(item) {
      this.params.pageNum++
      // this.$api.dynamicList(this.params).then(res => {
      // 	this.list.push(...res.data.records)
      // 	let currentId = 'myVideo' + item.detail.current;
      // 	this.videoContext = uni.createVideoContext(currentId)
      // 	this.videoContext.play()
      // 	// 滑动后滚动条时间为0
      // 	this.videoContext.seek(0)

      // 	this.list.forEach((item, idx) => {
      // 		let temp = 'myVideo' + idx
      // 		if (temp !== currentId) {
      // 			uni.createVideoContext(temp).pause();
      // 		}
      // 	})
      // })
      this.chart.pageNum = 1
      this.playShow = false
      this.keyword = false
    },
    // 评论展示
    CommentShow() {
      this.bomContent = !this.bomContent
    },
    // 评论列表触底加载
    scrolltolower() {
      this.chart.pageNum++
      this.$api.commentListDy(this.chart).then((res) => {
        if (this.chart.pageNum <= res.data.pages) {
          this.charts.push(...res.data.records)
        } else {
          this.$until.error('没有更多了')
        }
      })
    },
    // 点赞·1
    heart(item) {
      let hear = {
        topicType: 5,
        topicId: item.dynamicId
      }
      this.$api.like(hear).then((res) => {
        if (res.code == 200) {
          item.likeType = true
          item.likeNum++
        }
      })
    },
    GoDetails(item) {
      uni.navigateTo({
        url: 'ChefCircle-details?userId=' + item.userId
      })
    },
    // 发送
    send() {
      if (!this.commentId) {
        let commitCont = {
          type: 0,
          topicType: 5,
          content: this.value,
          topicId: this.chart.dynamicId
        }
        this.$api.comment(commitCont).then((res) => {
          if (res.code == 200) {
            this.$api.commentListDy(this.chart).then((res) => {
              this.charts = res.data.records
            })
            this.value = ''
            this.goodKey = true
          }
        })
      } else {
        let commitCont = {
          type: 1,
          topicType: 5,
          content: this.value,
          topicId: this.commentId,
          toUserId: this.userId
        }
        this.$api.comment(commitCont).then((res) => {
          if (res.code == 200) {
            this.$api.commentListDy(this.chart).then((res) => {
              this.charts = res.data.records
            })
            this.value = ''
            this.commentId = ''
            this.keyword = false
            this.goodKey = true
          }
        })
      }
    },

    // 回复调用input
    inputFocus(item, index) {
      this.userId = item.userId
      this.commentId = item.commentId
      this.keyword = true
      // this.goodKey = true
    },
    // 初始化评论列表
    chat(item) {
      this.chart.dynamicId = item.dynamicId
      this.chart.pageNum = 1
      this.$api.commentListDy(this.chart).then((res) => {
        if (res.code == 200) {
          this.charts = res.data.records
          this.show = true
          this.keyword = false
          this.goodKey = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.weiBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  width: 150rpx;
  color: #fff;
  margin-left: 20rpx;
  border-radius: 10rpx;
  background-color: var(--themeColor);
}

.zhiBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  width: 150rpx;
  color: #999;
  margin-left: 20rpx;
  border-radius: 10rpx;
  background-color: #e6e6e6;
}

.replies-img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

page {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.ppppppppppppppp {
  width: 100%;
  position: absolute;
  bottom: 98rpx;
  height: 800rpx;
  border-radius: 20rpx 20rpx 0 0;
  background: #fff;

  .top-commit {
    padding: 30rpx 30rpx 0 30rpx;
    font-weight: 800;
    font-size: 32rpx;
  }
}

.scroll-Y {
  height: 760rpx;
}

.play-right {
  // width: 150rpx;
  // height: 150rpx;
  // background: #fff;
  border-radius: 50%;
  opacity: 0.6;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.uni-margin-wrap {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

.swiper-item {
  display: block;
  text-align: center;
}

.bom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  padding: 5px 10px;
  width: 100%;
  background: #fff;

  .ipt {
    border-radius: 30px;
    // background: #eee;
    width: 100%;
  }
}

.char-list {
  padding: 0 10px;

  .pop-tit {
    font-weight: bold;
    font-size: 12px;
    color: #000;
    position: fixed;
    width: 98%;
    background: #fff;
    height: 30px;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .chat {
    display: flex;
    margin-top: 10px;

    .bigavatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .more-tit {
      color: #999;
      margin: 10rpx;
      font-size: 12px;
    }

    .name {
      font-size: 12px;
      color: #bbb;
    }

    .comment {
      margin: 0 5px;
      font-size: 12px;
      color: #999;
    }

    .recommit {
      margin: 10rpx;
    }

    .time {
      font-size: 12px;
      color: #ccc;
    }

    .reply {
      font-size: 12px;
      margin-left: 20rpx;
      color: #59aaff;
    }
  }
}

.video-right {
  position: absolute;
  height: 100px;
  height: 400px;
  z-index: 999;
  top: 50%;
  right: 10px;
  color: #fff;
  margin-right: 5px;
  text-align: center;

  image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    border: 2rpx solid #bbb;
    margin-bottom: 30rpx;
  }

  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff0000;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 35px;
    left: 25%;
  }

  .mt {
    margin-top: 8px;
  }
}

.video-bottom {
  position: absolute;
  bottom: 100px;
  font-weight: bold;
  color: #fff;
  left: 10px;

  .details {
    font-weight: 400;
    margin: 10rpx;
  }
}
</style>
